<template>
  <!--案场运营排行榜 -->
  <el-row style="height:100%">
    <page report="true">
      <div class="page-content report-con">
        <reportheader
          :option="option"
          :isCaseShow="false"
          :Caseradio='false'
          :showDisabled="showDisabled"
          :tags="global.tags"
          @upcondition="upcondition"
        ></reportheader>
        <div class="hei13"></div>
        <reportrank   :kpislist="kpislist" :titleName="global.title"   :KPIType="kpiType" @RankKpiTypeChange="RankKpiTypeChange" :RankTop10="RankTop10" :RankLast10="RankLast10"  ref='Rank' >
        </reportrank>
      </div>
    </page>
  </el-row>
</template> 
<style lang="scss">
.page-content {
  &.report-con {
    padding: 0 0;
    .dragmove{
      z-index: 0;
    }
  }
  padding: 15px;
  .fr {
    float: right;
  }
  .el-table {
    margin-bottom: 10px;
  }
  .paging {
    margin: 15px;
    height: 28px;
  }
  .hei13 {
    height: 15px;
    width: 100%;
  }
}
</style>
<script>
let moment = require("moment");

import page from "@/components/page/page";
import reportheader from "@/components/analyzeReport/reportpublic/reportheader";
import reportrank from "@/components/analyzeReport/reportpublic/reportRank";
import reportGlobal from "@/components/global/reportGlobal";//公共配置
let unit=reportGlobal.unit;
export default {
  data: function() {
      var option = {
        shortcuts:'dayShortcuts',
          isAreaShow: false,                 //是否显示区域，如显示需传title 默认不显示 
          caseTitle: "",         
      };
      return {
        title:'店铺运营排行榜',
        option: option, 
        DataV:{},          //head条件接收
        global:{},
        kpiType:'',         //选中的指标
        showDisabled:{
          sum_or_part:false,
          time_or_distr:false,
        },
        kpislist:[],
        RankTop10:[],
        RankLast10:[],
        code:this.$route.query.code,        //通过菜单栏点击传过来的code判断使用的公共参数
      };
  },
  components: {
    page,
    reportheader,
    reportrank,
  },
  created() {
    for(let i in reportGlobal.queryList){
      if( this.code == reportGlobal.queryList[i].code){
        this.global = reportGlobal.queryList[i]
      };
    };
    this.option.caseTitle = this.global.caseTitle
  },
  mounted() {},
  watch: {},
  methods: {
    upcondition(data){
      if(data.company_id){
        this.DataV=data;
        this.$Bus.$emit('Loading',true);
        this.getKpis(data.company_id);//企业id
      }else{
        this.$message.error('请选择企业！');
        this.$Bus.$emit("Loading", false);
        return
      }
    },
    //获取指标接口
    getKpis(id,org_type=1){
      id = id.split(',')
      this.$Bus.$emit('Loading',true);
      let url='/sys/report_assist_new/get_indicator_list'
      let params = {
        org_id_list : id,
        org_type :org_type,
      }
      this.$api.post(url,params)
      .then(data=>{
        if(data == '10001'){
          this.$message.error('无权操作该数据')
          return
        }
        if(data){
          this.kpislist = data.data.filter(x=>{
            return this.global.indicator_keys.includes(x.key)
          })
          this.kpislist.sort((x,y)=>{
            if(x.id < y.id){
              return -1
            }else{
              return 1
            }
          });
          let keysArr = this.kpislist.map(x=>{
            return x.key
          })
          this.kpiType = keysArr.includes(this.kpiType) ? this.kpiType :this.kpislist[0].key;
          this.Updata();
        }
        else{
             this.$Bus.$emit('Loading',false);
        }
       
      })
      .catch(err=>{
        this.removeData();
        console.log(err,'企业下无指标');
   
      })

    },
    Updata() {
      this.$Bus.$emit("Loading", true);
      let arr=this.DataV.company_id.split(',');
      let parmas={
        org_id_list:arr,
        org_type:1
      }
      let url="/sys/report_new/ranking_sum?ranking_num=10&tags="+ this.global.tags+ "&indicator_key=" +this.kpiType + '&group_type=case'
      url += "&start_day=" + this.DataV.start_day + "&end_day=" + this.DataV.end_day+"&start_hm="+this.DataV.start_hm+"&end_hm="+this.DataV.end_hm;
      this.$api
        .post(url,parmas)
        .then(data => {
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            return
          }
          if (data.data!=null&&Object.keys(data.data).length>0) {
            this.setRankData(data.data);
            
          } else {
            console.log("企业下无数据,");
            this.removeData();        
            this.$Bus.$emit("Loading", false);
          }
        })
        .catch(err => {
           console.log(err);
          this.removeData();
          this.$Bus.$emit("Loading", false);
        });
    },
    //指标点击
    RankKpiTypeChange(val){
        this.kpiType = val
        this.$Bus.$emit('Loading',true);
        this.Updata()
    },
    //给组件传值
    setRankData(data){
      let top = [];
      let last = [];

      for (let i = 0; i < data.top_list.length; i++) {
        let top_model = {};
        let last_model = {};

        top_model.name = data.top_list[i].case_info_name;
        last_model.name = data.last_list[i].case_info_name;
        top_model.value = data.top_list[i][this.kpiType];
        last_model.value = data.last_list[i][this.kpiType];
        top_model.unit = unit[this.kpiType];
        last_model.unit = unit[this.kpiType];

        top.push(top_model);
        last.push(last_model);
      }
      this.RankTop10 = top;
      this.RankLast10 = last;
      this.$nextTick(() => {
        this.$Bus.$emit("Loading", false);
      })
    },
    removeData(){
       this.RankTop10=[];
       this.RankLast10=[];
        this.$nextTick( ()=>{
         this.$Bus.$emit("Loading", false);
       })
    }
  }
};
</script>
